<template>
	<!-- 我的名片 -->
	<!-- @click="companyClose" -->
	<view class="">
		<view class="card_warp">
			<card :cardCont="cardFrom" meCard="true"></card>
			<button class="share_btn flex align-center" @click="shareBtn">
				<image src="@/static/img2/my/my_card/shear.png" mode="aspectFit" style="width: 25rpx;height: 25rpx;" class="mr-1 rounded-0"></image>
				分享名片
			</button>
		</view>
		<!-- 编辑框 -->
		<view class="edit_box mt-2 bg-white p-2 font" style="margin-bottom: 100rpx;">
			<view class="to_cmpany text-center px-3 py-1 font-sm">完善名片快速加入现场通讯录</view>
			<u--form labelPosition="left" :model="cardFrom" ref="cardFrom" labelWidth="80" :rules="rules">
				<u-form-item label="头像" prop="userphoto" borderBottom>
					<view class="justify-end content-end head_img">
						<u-upload :fileList="userphotoImg" @afterRead="afterphoto" @delete="deletephoto" name="userphoto" :maxCount="1" :max-size="600 * 1024" @oversize="oversize">
							<image src="/static/img2/my/default_headimg.png" mode="widthFix" style="width:70rpx;height: 70rpx;"></image>
						</u-upload>
					</view>
				</u-form-item>
				<u-form-item label="姓名" prop="name" borderBottom><u--input v-model="cardFrom.name" maxlength="10" border="none" placeholder="请输入姓名"></u--input></u-form-item>
				<u-form-item label="职位" prop="post" borderBottom><u--input v-model="cardFrom.post" maxlength="20" border="none" placeholder="请输入职位"></u--input></u-form-item>
				<u-form-item label="企业名称" prop="companyname" borderBottom>
					<view class="name_box" @tap.stop.prevent>
						<u--input
							v-model="cardFrom.companyname"
							maxlength="20"
							border="none"
							placeholder="请输入企业名称"
							:disabled="cardFrom.parent_id == 1 || cardFrom.parent_id == 2 ? true : false"
						></u--input>
						<!-- @change="inputChange" -->
						<!-- <view class="tips_box p-2 shadow" v-show="companyShow">
							<image v-if="nameList.length <= 0" class="empty_img" src="@/static/img2/home/empty_img.png" mode="aspectFill"></image>
							<view v-else class="list">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="list_item font_24_2 py-1" v-for="nameItem of nameList" :key="nameItem.id" @click="nameSelect(nameItem)">
										<rich-text :nodes="nameItem.company_name"></rich-text>
									</view>
								</scroll-view>
							</view>
						</view> -->
					</view>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" borderBottom>
					<u--input v-model="cardFrom.phone" maxlength="11" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<!-- <u-form-item label="微信号" prop="wechat_id" borderBottom>
					<u--input v-model="cardFrom.wechat_id" maxlength="25" border="none" placeholder="请输入微信号"></u--input>
				</u-form-item> -->
				<u-form-item label="邮箱" prop="mail" borderBottom><u--input v-model="cardFrom.mail" maxlength="30" border="none" placeholder="请输入邮箱"></u--input></u-form-item>
				<!-- <u-form-item label="公司地址" prop="address" borderBottom>
					<u--input
						v-model="cardFrom.address"
						maxlength="50"
						border="none"
						placeholder="请输入公司地址"
						:disabled="cardFrom.parent_id == 1 || cardFrom.parent_id == 2 ? true : false"
					></u--input>
				</u-form-item> -->
				<u-form-item label="主营业务" prop="main_products" borderBottom>
					<u--input
						v-model="cardFrom.main_products"
						maxlength="50"
						border="none"
						placeholder="请输入主营业务"
						:disabled="cardFrom.parent_id == 2 ? true : false"
					></u--input>
				</u-form-item>
				<!-- <u-form-item label="上传二维码" prop="orcode_img" borderBottom>
					<view class="justify-end content-end">
						<u-upload
							:fileList="cardFrom.orcode_img"
							@afterRead="afterRead"
							@delete="deletePic"
							name="ewm"
							:maxCount="1"
							:max-size="600 * 1024"
							@oversize="oversize"
						></u-upload>
					</view>
				</u-form-item> -->
			</u--form>
			<view class="fixed-bottom bg-white flex justify-between align-center mt-5 p-2 w-100 shadow">
				<view class="photo mr-1" @click="takePicture">
					<u-icon name="camera" size="30" color="#a0cfff"></u-icon>
					<view class="font-small text-hover-light">拍照识别</view>
				</view>
				<view :class="cardFrom.attestation == 0 ? 'submit_card' : 'submit_card1'">
					<button class="bg_main h6 text-white py-2" @click="submit">马上加入现场通讯录</button>
				</view>
				<view class="to_auth flex flex-column align-center" @click="goPages('/pages/my/auth/child_firm')" v-if="cardFrom.attestation == 0">
					<image src="@/static/img2/my/my_card/auth.png" mode="aspectFit"></image>
					<text class="c_main font_24">去认证</text>
				</view>
			</view>
		</view>
		<!-- 识别信息弹窗 -->
		<u-modal :show="photoInfoShow" title="识别成功" :showCancelButton="true" @confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<view class="h5 c_6" v-if="photoInfo.company">
					企业名称：
					<text class="c_9">{{ photoInfo.company }}</text>
				</view>
				<view class="h5 c_6" v-if="photoInfo.name">
					姓名：
					<text class="c_9">{{ photoInfo.name }}</text>
				</view>
				<view class="h5 c_6" v-if="photoInfo.title">
					职位：
					<text class="c_9">{{ photoInfo.title }}</text>
				</view>
				<view class="h5 c_6" v-if="photoInfo.tel_cell">
					手机号：
					<text class="c_9">{{ photoInfo.tel_cell }}</text>
				</view>
				<view class="h5 c_6" v-if="photoInfo.email">
					邮箱：
					<text class="c_9">{{ photoInfo.email }}</text>
				</view>
				<view class="h5 c_6" v-if="photoInfo.addr">
					公司地址：
					<text class="c_9">{{ photoInfo.addr }}</text>
				</view>
				<!-- <view class="">主营业务:<text>{{photoInfo.main_products}}</text></view> -->
			</view>
		</u-modal>
	</view>
</template>

<script>
// import { getBusinessList, businessAdd, businessDel, businessEdit } from '@/api/my/card.js';

import { getUserMember, editUserMember } from '@/api/my/card.js';
import { uploadImage, businessCardImg } from '@/api/common.js';
import { enterpriseNamee } from '@/api/my/userinfo.js';
import card from '@/subPages/my/list/card/component/card.vue';
import { exhibitionIndex } from '@/api/exhibition/exhibition.js';
export default {
	components: {
		card
	},
	data() {
		return {
			cardFrom: {
				companyname: '',
				name: '',
				post: '',
				phone: '',
				// wechat_id: '',
				mail: '',
				// address: '',
				main_products: '',
				// orcode_img: [],
				userphoto: ''
			},
			userphotoImg: [],
			rules: {
				companyname: {
					type: 'string',
					required: true,
					message: '请填写',
					trigger: ['blur', 'change']
				},
				name: {
					type: 'string',
					required: true,
					message: '请填写',
					trigger: ['blur', 'change']
				},
				post: {
					type: 'string',
					required: true,
					message: '请填写',
					trigger: ['blur', 'change']
				},
				phone: [
					{
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['blur', 'change']
					},
					{
						message: '请填写11位电话号',
						pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						trigger: ['blur']
					}
				],
				// wechat_id: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写微信号',
				// 	trigger: ['blur', 'change']
				// },
				mail: [
					{
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['blur', 'change']
					},
					{
						message: '请填写正确的邮箱',
						pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
						trigger: ['blur']
					}
				],
				// address: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写',
				// 	trigger: ['blur', 'change']
				// },
				main_products: {
					type: 'string',
					required: true,
					message: '请填写',
					trigger: ['blur', 'change']
				}
				// orcode_img: {
				// 	type: 'array',
				// 	required: true,
				// 	message: '请上传二维码',
				// 	trigger: ['blur', 'change']
				// }
			},
			photoInfoShow: false,
			photoInfo: {}, //拍照识别获取到的信息
			msgCount: 0,
			companyShow: false,
			nameList: [], //关联公司
			timer: null,
			cName: '',
			authCard: false
		};
	},
	// watch: {
	// 	cardFrom: {
	// 		handler(newV) {
	// 			console.log('companyname==>', newV.companyname);
	// 		},
	// 		deep: true
	// 	}
	// },
	onReady() {
		this.$refs.cardFrom.setRules(this.rules);
	},
	mounted() {
		this.getCardList();
		// getApp().globalData.productType = 'qz';
		uni.setStorageSync('productType', 'qz');
	},
	methods: {
		// 获取我的名片列表
		getCardList() {
			// this.cardFrom = [];
			getUserMember({
				token: uni.getStorageSync('userInfo').token
			}).then(res => {
				// console.log(res);
				if (res.code == 0) {
					if (res.data) {
						this.cardFrom = res.data;
						this.userphotoImg = res.data.userphoto
							? [
									{
										url: res.data.userphoto
									}
							  ]
							: [];
					}
				} else {
					uni.$u.toast('名片列表获取失败');
				}
			});
		},
		// 添加名片
		submit() {
			this.$refs.cardFrom
				.validate()
				.then(res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token,
						...this.cardFrom
					};
					editUserMember(msg).then(res => {
						uni.$u.toast(res.msg);
						if (res.code == 0) {
							// 名片详情跳转过来的，登录成功后返回名片详情
							if (uni.getStorageSync('loginToPage').title == 'cardMain') {
								let msg = uni.getStorageSync('loginToPage');
								uni.navigateTo({
									url: '/subPages/my/list/card/card_main?id=' + msg.cardUid + '&exhibitionId=' + msg.exhibitionId
								});
								// uni.removeStorageSync('loginToPage');
								return;
							}
							// 保存名片跳转展会
							exhibitionIndex().then(res => {
								if (res.code == 0) {
									if (res.id == 0) {
										// 跳转展会列表
										this.goPages('/subPages/exhibition/list');
									} else {
										// 跳转展会详情
										// if (res.activity_status == 1) {
										// 	this.goPages('/subPages/exhibition/before?id=' + res.id + '&active=' + res.activity_status);
										// } else {
										uni.setStorageSync('productType', 'qz');
										uni.setStorageSync('mycodeSuccess', res.id);
										this.goPages('/subPages/exhibition/index?id=' + res.id + '&active=' + res.activity_status);
										// }
									}
								}
							});
						}
					});
				})
				.catch(errors => {
					console.log(errors);
					uni.$u.toast('请正确填写名片信息');
				});
		},
		// 上传头像
		async afterphoto(event) {
			// console.log(event);
			uploadImage(event).then(res => {
				if (res.code == 0) {
					uni.$u.toast(res.msg);
					this.userphotoImg = [
						{
							url: res.img
						}
					];
					this.cardFrom.userphoto = res.img;
				} else {
					uni.$u.toast('头像上传失败');
				}
			});
		},
		// 删除头像
		deletephoto(event) {
			this.userphotoImg.splice(event.index, 1);
			this.cardFrom.userphoto = '';
		},

		// 新增二维码
		async afterRead(event) {
			// console.log(event);
			uploadImage(event).then(res => {
				if (res.code == 0) {
					uni.$u.toast(res.msg);
					// if (!this.cardFrom.orcode_img) {
					// 	this.cardFrom.orcode_img = [];
					// }
					// this.cardFrom.orcode_img.push({
					// 	url: res.img
					// });
				} else {
					uni.$u.toast('二维码上传失败');
				}
			});
		},
		// 删除二维码
		// deletePic(event) {
		// this.cardFrom.orcode_img.splice(event.index, 1);
		// },
		// 拍照识别
		takePicture() {
			var that = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: async res => {
					// let base64_img = await util.urlTobase64(that.imgpath[0]);
					// console.log('图片', base64_img);
					let msg = {
						type: 2,
						file: res.tempFilePaths[0],
						token: uni.getStorageSync('userInfo').token || ''
					};
					businessCardImg(msg)
						.then(res => {
							// console.log(res);
							if (res.code == 0) {
								if (res.data.length == 0 || res.data == '{}') {
									uni.$u.toast('未识别到名片信息');
								} else {
									this.photoInfo = res.data;
									this.photoInfoShow = true;
								}
							} else if (!res) {
								uni.$u.toast('未识别到名片信息');
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取数据失败', err);
						});
				}
			});
		},
		// 确认
		confirm() {
			this.cardFrom.companyname = this.photoInfo.company || '';
			this.cardFrom.name = this.photoInfo.name || '';
			this.cardFrom.post = this.photoInfo.title || '';
			this.cardFrom.phone = this.photoInfo.tel_cell || '';
			this.cardFrom.mail = this.photoInfo.email || '';
			// this.cardFrom.address = this.photoInfo.addr || '';
			setTimeout(() => {
				this.cancel();
			}, 500);
		},
		// 取消
		cancel() {
			this.photoInfoShow = false;
		},
		// inputChange(e) {
		// 	if (this.timer !== null) clearTimeout(this.timer);
		// 	this.timer = setTimeout(() => {
		// 		// if (e.length < 1) return;
		// 		this.getCompany(e);
		// 	}, 500);
		// },
		// 获取企业列表
		// getCompany(val) {
		// 	this.companyShow = true;
		// 	enterpriseNamee({
		// 		kw: val || '',
		// 		token: uni.getStorageSync('userInfo').token || ''
		// 	})
		// 		.then(res => {
		// 			// console.log('企业', res);
		// 			if (res.code == 0) {
		// 				// 过滤出符合条件的值高亮
		// 				res.data.map((item, index) => {
		// 					if (item.company_name.includes(this.cardFrom.companyname)) {
		// 						item.name = item.company_name;
		// 						item.company_name = this.join(item.company_name, this.cardFrom.companyname);
		// 					}
		// 				});
		// 				this.nameList = res.data;
		// 				// console.log(this.nameList);
		// 			} else {
		// 				uni.$u.toast(res.msg);
		// 			}
		// 		})
		// 		.catch(err => {
		// 			console.log('获取企业列表失败', err);
		// 		});
		// },
		// // 关键字高亮
		// join(str, key) {
		// 	var reg = new RegExp(`(${key})`, 'gm');
		// 	var replace = '<span style="color:#CF1526;font-weight:bold;">$1</span>';
		// 	return str.replace(reg, replace);
		// },
		// nameSelect(item) {
		// 	// console.log(item);
		// 	this.cardFrom.companyname = item.name;
		// 	this.cName = item.name;
		// 	setTimeout(() => {
		// 		this.companyShow = false;
		// 	});
		// },
		// companyClose() {
		// 	if (this.companyShow) {
		// 		if (this.cardFrom.companyname && this.nameList.length >= 1) return;
		// 		this.companyShow = false;
		// 		// 如果没有选择企业列表中的企业将把输入框置空
		// 		if (!this.cName) {
		// 			this.cardFrom.companyname = '';
		// 		}
		// 	}
		// },
		// 分享名片
		shareBtn() {
			this.$refs.cardFrom
				.validate()
				.then(async res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token,
						...this.cardFrom
					};
					editUserMember(msg).then(res => {
						this.goPages('/subPages/my/list/card/card_main?id=' + this.cardFrom.uid);
					});
				})
				.catch(errors => {
					console.log(errors);
					uni.$u.toast('请先完善名片信息');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.to_cmpany {
	background: linear-gradient(to top, #ffe8ce, #fbc9a0);
	width: 55%;
	border-radius: 50rpx;
	margin: auto;
	color: #7c4710;
}

.submit_card {
	width: 70%;
}

.submit_card1 {
	width: 85%;
}

.to_auth {
	padding: 0 20rpx;

	image {
		width: 45rpx;
		height: 45rpx;
	}
}

.name_box {
	position: relative;

	.tips_box {
		width: 500rpx;
		max-height: 500rpx;
		position: absolute;
		top: 60rpx;
		right: -10rpx;
		background-color: $color2;
		z-index: 99;
		border-radius: 15rpx;
		border: 1px solid #f2f2f2;

		.empty_img {
			width: 100%;
			height: 300rpx;
			margin: auto;
		}

		.scroll-Y {
			height: 450rpx;

			.list_item {
				border-bottom: 1px solid #f2f2f2;
			}

			.list_item:last-child {
				border: 0;
			}
		}
	}
}

.card_warp {
	position: relative;

	.share_btn {
		position: absolute;
		bottom: -7rpx;
		left: 50%;
		margin-left: -80rpx;
		// width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #f9a938;
		color: #fff;
		font-size: 24rpx;
		padding: 0 15rpx;
		border-radius: 23rpx;
	}
}

::v-deep .head_img .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}

::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}

::v-deep .uni-input-placeholder {
	text-align: right;
}

::v-deep .u-form-item__body__right__message {
	text-align: right;
}

::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
}

::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}

::v-deep .u-upload__wrap {
	justify-content: flex-end;
}

::v-deep .photo .u-icon {
	justify-content: center;
}
</style>
